.box {
  width: 100px;
  height: 100px;
  background-color: #000;
}
.demo-1 {
  &:hover {
    width: 500px;
  }
  transition: width 2s linear 2s;
}

.demo-1-1 {
  &:hover {
    transform: rotate(45deg);
  }
  transition: width 2s linear 2s;
}
//animation例子 移动到div
.demo-2 {
  &:hover {
    .cell {
      // animation: move 2s linear; /*move定义移动, linear 后第4个参数,数字参数表示播放次数, 无限播放使用关键词 infinite,参数5:*/
      animation: move 2s linear infinite;
    }
  }
  .cell {
    width: 200px;
    height: 200px;
    background-color: red;
  }
}
/*编辑动画名称,这里的move*/
@keyframes move{
  100% {
     transform: translateX(200px);//水平位移
  }
} 

//例3:animation例子 落球+跳动的元素
.demo-3 {
  animation: jump 2s ease-in infinite ;
  border-radius: 50%;
}
@keyframes jump{
  0% {
     transform: translateY(0);
  }
  40% {
    transform: translateY(200px);/*正数为向下*/
  }
  50% {
    transform: translateY(200px);
  }
  100% {
    transform: translateY(0);
  }
}

.person {
  width: 90px;
  height: 250px;
  background: url(../images/animation_demo.png) no-repeat;
  background-position-x: -92px;
  animation: run 1s steps(8) infinite;
}
@keyframes run {
  // 0% {
  //   background-position-x: -92px;
  // }
  // 50% {
  //   background-position-x: -300px;
  // }
  100% {
    background-position-x: -900px;
  }
}